<!doctype html>
<html>
	<head>
		<title>Take Me Out</title>
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
		<link rel="stylesheet" type="text/css" href="../../style/ui-lightness/jquery-ui-1.8.9.custom.css">
		<link type="text/css" rel="stylesheet" href="../../style/style.css">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script>
		<script type="text/javascript" src="home.js"></script>
	</head>
	<body>
		
		<div id="fb-root"></div>
		<script src="http://connect.facebook.net/en_US/all.js"></script>
		<script>
			FB.init({ 
				appId:'194206907262031', cookie:true,
				status:true, xfbml:true 
			});
		</script>
		
		<div id="foreground">
			
			<h1>Take Me Out</h1>
			
			<div id="intro"></div>
			<div id="step-login" class="step">
				<p>Hasellus pretium consectetur dictum. Curabitur adipiscing sem vitae turpis aliquam dapibus. Fusce consequat quam ultrices libero interdum vitae vestibulum neque pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nec elit tortor, nec vestibulum mauris. Pellentesque id orci mauris. Nam varius faucibus semper. Aenean viverra mattis dui, nec porttitor nibh ullamcorper nec.</p>
				<div id="fb-login">
					<fb:login-button>Login with Facebook</fb:login-button>
				</div>
			</div>
			
			<div id="step-filter" class="step" style="display: none">
				<h2>I dunno, what'd you want to do?</h2>
				<p>Hasellus pretium consectetur dictum. Curabitur adipiscing sem vitae turpis aliquam dapibus. Fusce consequat quam ultrices libero interdum vitae vestibulum neque pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nec elit tortor, nec vestibulum mauris. Pellentesque id orci mauris. Nam varius faucibus semper. Aenean viverra mattis dui, nec porttitor nibh ullamcorper nec.</p>
				
				<div class="filters">
					
					<div class="filter filter-people">
						<div class="slider" id="slider-people"></div>
						<label>People</label>
						<div class="value">2 people</div>						
					</div>

					<div class="filter filter-time">
						<div class="slider" id="slider-time"></div>
						<label>Time</label>
						<div class="value">2 hours</div>
					</div>
					
					<div class="filter filter-distance">
						<div class="slider" id="slider-distance"></div>
						<label>Distance</label>
						<div class="value">20 km</div>
					</div>
					
					<button id="submit-filters">Ok, done!</button>
					
				</div>
				
			</div>
			<div id="step-activity" class="step" style="display: none">
			</div>

		</div>
	</body>
</html>